<template>
  <div class="left-chart-1">
    <dv-scroll-board v-if="config.data" :config="config" class="lc1-chart" />
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
export default {
  name: "LeftChart1",
  props: {
    refreshKey: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      config: {},
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.config = {
        headerBGC: "#050f67",
        header: [
          "料塔",
          "序号",
          "厂家",
          "生产日期",
          "生产批号",
          "投料时间",
          "数量(包)",
          "累计得胚率",
        ],
        data: [
          [
            "塔1#",
            "1",
            "华蕾",
            "2023-12-15",
            "11121546-1",
            "10:20",
            "1",
            "98%",
          ],
          [
            "塔1#",
            "2",
            "华蕾",
            "2023-12-15",
            "11121546-1",
            "10:20",
            "1",
            "98%",
          ],
          [
            "塔1#",
            "3",
            "华蕾",
            "2023-12-15",
            "11121546-1",
            "10:20",
            "1",
            "98%",
          ],
          [
            "塔1#",
            "4",
            "华蕾",
            "2023-12-15",
            "11121546-1",
            "10:20",
            "1",
            "98%",
          ],
          [
            "塔2#",
            "1",
            "华蕾",
            "2023-12-15",
            "11121546-1",
            "10:20",
            "1",
            "98%",
          ],
          [
            "塔2#",
            "2",
            "华蕾",
            "2023-12-15",
            "11121546-1",
            "10:20",
            "1",
            "98%",
          ],
          // ["塔2#","3","华蕾","2023-12-15","11121546-1","10:20","1","98%"],
          // ["塔2#","4","华蕾","2023-12-15","11121546-1","10:20","1","98%"],
        ],
        rowNum: 6,
        columnWidth: [100, 70, 100, 125, 125, 80, 90, 100],
        align: ["center"],
        oddRowBGC: "#053a6d",
        evenRowBGC: "#091c56",
      };
    },
  },
};
</script>

<style lang="less" scoped>
.left-chart-1 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-grow: 0;
  flex-direction: column;
  font-size: 15px;
  padding-top: 42px;

  .lc1-chart {
    flex: 1;
  }

  ::v-deep .dv-scroll-board {
    .header {
      font-size: 12px;
      .header-item {
        white-space: normal;
        line-height: normal !important;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
      }
    }
    .rows .ceil {
      font-size: 12px;
      white-space: unset;
      line-height: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
  }
}
.no-data {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  opacity: 0.6;
}
</style>
